<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>让搜索框固定</title>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			$(function(){
				var top = parseInt($("#head").css("height"));
				$(window).scroll(function(){
					var scrolltop = parseInt($(this).scrollTop());//滚动条滚下去的距离
					if(scrolltop>=top){
						$("#search").css({"position":"fixed","top":"0px"});
					}
					else{
						$("#search").css("position","static");
					}
				});
			});
		</script>
	</head>
	<body >
		<div id="head" style="height: 200px;border: 1px solid red;"></div>
		<div id="search" style="background-color: darkgray;width: 90%;">
			<form>
			taobao:<input type="text" name="product"/><input type="submit" value="搜索" />
			</form>
		</div>
		<div id="content" style="height: 4000px;"></div>
	</body>
</html>
